<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>飞翔的小鸟</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			#box{
				background: url(img/bg.jpg) no-repeat;
				width: 343px;
				height: 480px;
				position: relative;
				margin: 100px auto 0;
				border: 2px solid black;
				cursor: pointer;
				overflow: hidden;
				
			}
			#head{
				position: absolute;
				top: 120px;
				width: 100%;
				text-align: center;
				/*background: red;*/
			}
			#head>img:last-child{
				position: absolute;
				right: 50px;
				top: 30%;
				animation: fly 1.5s linear infinite;
			}
			@keyframes fly{
				from{
					top: 30%;
				}
				25%{
					top: 0%;
				}
				50%{
					top: 30%;
				}
				75%{
					top: 60%;
				}
				top{
					top: 30%;
				}
			}
			#menu{
				position: absolute;
				width: 100%;
				top: 55%;
				text-align: center;
			}
			#menu>img{
				cursor: pointer;
			}
			#score{
				position: absolute;
				width: 100%;
				text-align: center;
				top: 0;
				display: none;
			}
			#bird{
				position: absolute;
				left: 62px;
				top: 227px;
				display: none;
			}
			#end{
				position: absolute;
				width: 100%;
				text-align: center;
				top: 150px;
				display: none;
			}
			#end>span{
				position: absolute;
				font-size: 25px;
			}
			#end>span:nth-child(2) {
				right: 65px;
				top: 40px;
			}
			#end>span:last-child {
				right: 65px;
				top: 90px;
			}
			/*管道*/
			#pipes{
				position: absolute;
				height: 100%;
				width: 100%;
				display: none;
			}
			.pipe{
				position: absolute;
				width: 62px;
				height: 423px;
				/*background: red;*/
				top: 0;
			}
			#topPipe{
				position: absolute;
				width: 62px;
				/*height: 90px;*/
				background: url(img/up_pipe.png)bottom no-repeat, url(img/up_mod.png) repeat-y;
			}
			#bottomPipe{
				bottom: 0;
				position: absolute;
				width: 62px;
				/*height: 90px;*/
				background: url(img/down_pipe.png) top no-repeat, url(img/down_mod.png) repeat-y;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<!-- 头 -->
			<div id="head">
				<img src="img/head.jpg" alt="">
				<img src="img/bird.png" alt="">
			</div>
			<!-- 开始菜单 -->
			<div id="menu">
				<img src="img/start.jpg" alt="" id="start">
			</div>
			<!-- 小鸟 -->
			<img src="img/bird.png" alt="" id="bird">
			<div id="score">
				<img src="img/0.jpg" alt="">
			</div>
			<ul id="pipes">
				<!-- <li class="pipe">
					<div id="topPipe"></div>
					<div id="bottomPipe"></div>
				</li> -->
			</ul>
			<div id="end">
				<img src="img/message.jpg" alt="">
				<span>0</span>
				<span>0</span>
			</div>
			<audio src="music/bullet.mp3" id="bulletM"></audio>
			<audio src="music/game_music.mp3" id="gameM"></audio>
			<audio src="music/game_over.mp3" id="gameOverM"></audio>
		</div>
	</body>
</html>
<script>
	// 获取对象
	var headDiv = document.getElementById("head");
	var menuDiv = document.getElementById("menu");
	var startBtn = document.getElementById("start");
	var scoreDiv = document.getElementById("score");
	var scoreImg = scoreDiv.firstElementChild;
	var birdImg = document.getElementById("bird");
	var endDiv = document.getElementById("end");
	var currentScoresSpan  = endDiv.children[1];
	var bestScoreSpan = endDiv.lastElementChild;
	var pipesUl = document.getElementById("pipes");
	var bulletM = document.getElementById("bulletM");
	var gameM = document.getElementById("gameM");
	var gameOverM = document.getElementById("gameOverM");
	var boxDiv = document.getElementById("box");

	// 初始分数
	var num = 0;

	// 每次下落的距离
	var speed = 0;
	// 下降定时器
	var downTimer;
	// 上升定时器
	var upTimer;
	
	// 开始按钮点击事件
	startBtn.onclick = function(){
		// 隐藏元素
		headDiv.style.display = "none";
		menuDiv.style.display = "none";

		// 显示元素
		birdImg.style.display = "block";
		scoreDiv.style.display = "block";
		pipesUl.style.display = "block";

		// 播放音乐
		gameM.loop = "loop";
		gameM.play();

		// 创建管道
		createPipe();
		setInterval(createPipe, 3000);

		downTimer = setInterval(birdDown, 30);

		boxDiv.onclick = function() {
			clearInterval(downTimer);
			clearInterval(upTimer);
			birdImg.src = "img/up_bird.png";
			speed = 8;
			upTimer = setInterval(birdUp, 30);
		}
		setInterval(function() {
			var lis = pipesUl.children;
			for (var i = 0; i < lis.length; i++) {
				crash(lis[i].firstElementChild);
				crash(lis[i].lastElementChild);
			}
		}, 15);
	}

	// 判断小鸟是否和管道碰撞
	function crash(pipe_div) {
		var left1 = birdImg.offsetLeft;
		var right1 = left1 + birdImg.offsetWidth;
		var top1 = birdImg.offsetTop;
		var bottom1 = top1 + birdImg.offsetHeight;

		// 小坑, 需要先找到li距左边的距离
		var left2 = pipe_div.offsetParent.offsetLeft;
		var right2 = left2 + pipe_div.offsetWidth;
		var top2 = pipe_div.offsetTop;
		var bottom2 = top2 + pipe_div.offsetHeight;

		// 判断小鸟和管道是否碰到了一起
		var result = right1 < left2 || bottom1 < top2 || left1 > right2 || top1 > bottom2;
		if (!result) {
			gameOver();
		}
	}

	// 随机数函数
	function randomNum(x, y) {
		return Math.floor(Math.random() * (y - x + 1) + x);
	}

	// 创建管道函数
	function createPipe() {
		// li的开始位置
		var x = pipesUl.offsetWidth;
		// 过道的随机高度
		var birdPathH = randomNum(100, 200);

		// 创建li
		var li = document.createElement("li");
		li.className = "pipe";
		li.style.left = x + "px";
		pipesUl.appendChild(li);

		// 上管道创建
		var topPipe = document.createElement("div");
		topPipe.id = "topPipe";
		var topHeight = Math.floor(Math.random() * (li.offsetHeight - 210 + 1));
		topPipe.style.height = topHeight + 'px';
		li.appendChild(topPipe);
		
		// 下管道创建
		var bottomPipe = document.createElement("div");
		bottomPipe.id = "bottomPipe";
		var bottomHeight = li.offsetHeight - birdPathH - topHeight;
		bottomPipe.style.height = bottomHeight + "px";
		li.appendChild(bottomPipe);

		// 移动
		var moveTimer = setInterval(function(){
			x--;
			if (x == 0) {
				changeScore();
			}
			li.style.left = x + "px";
			if (x <= -li.offsetWidth) {
				pipesUl.removeChild(li);
				clearInterval(moveTimer);
			}
		}, 15);


	}

	// 加分函数
	function changeScore() {
		num++;
		// 清空图片
		scoreDiv.innerHTML = "";
		if (num < 10) {
			var oImg = document.createElement("img");
			oImg.src = "img/" + num + ".jpg";
			scoreDiv.appendChild(oImg);
		} else {
			var img1 = document.createElement("img");
			img1.src = "img/" + Math.floor(num / 10) + ".jpg";
			scoreDiv.appendChild(img1);

			var img2 = document.createElement("img");
			img2.src = "img/" + num % 10 + ".jpg";
			scoreDiv.appendChild(img2);
		}
	}

	// 鸟向上升
	function birdUp() {
		speed -= 1;
		if (speed <= 0) {
			speed = 0;
			clearInterval(upTimer);
			downTimer = setInterval(birdDown, 30);
		}
		// 修改位置
		birdImg.style.top = birdImg.offsetTop - speed + "px";
		if (birdImg.offsetTop <= 0) {
			birdImg.style.top = 0;
		}
	}

	// 鸟向下落的过程
	function birdDown() {
		birdImg.src = "img/down_bird.png";
		speed += 0.8;
		if (speed >= 10) {
			speed = 10;
		}
		birdImg.style.top = birdImg.offsetTop + speed + "px";
		if (birdImg.offsetTop + birdImg.offsetHeight >= 423) {
			// 游戏结束
			gameOver();
		}
	}

	// 游戏结束
	function gameOver() {
		var timerLast = setInterval(function(){}, 1);
		for(var i = timerLast; i > 0; i--) {
			clearInterval(i);
		}
		endDiv.style.display = "block";

		gameM.pause();
		gameOverM.play();

		if (localStorage.bestScore) {
			localStorage.bestScore = localStorage.bestScore > num ? localStorage.bestScore : num;
		} else {
			localStorage.bestScore = num;
		}

		currentScoresSpan.innerHTML = num;
		bestScoreSpan.innerHTML = localStorage.bestScore;

		var result = confirm("男人不能说不行, 再来一把?");
		if (result) {
			location.reload();
		}
	}

</script>



































